<template>
 <div class="back-cont">
       <h1 style="position: absolute;top: 20%;left: 50%;transform: translate(-50%,-50%);">注册页面</h1>
    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="姓名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"/>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio-group v-model="form.role">
            <el-radio value="0">医生</el-radio>
            <el-radio value="1">病患</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input-number v-model="form.age" :min="1" :max="200"  />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio value="0">男</el-radio>
            <el-radio value="1">女</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item>
         <el-button type="primary" @click="onSubmit">Create</el-button>
         <el-button type="primary" plain @click="cancel">Cancel</el-button>
         </el-form-item>
        </el-form>
    </div>
 </div>
</template>
<script>
import { ElMessage } from 'element-plus'
import querystring from 'querystring'
export default{
    name:"register",
    data(){
    return{
      form:{
        username:"",
        password:"",
        role:0,
        age:1,
        gender:0
      },
      permission :false
    }
  },
  methods:{
    //点击注册
    onSubmit(){
        this.$axios.post('http://localhost:8000/medic/register/',querystring.stringify(this.form)).then(res=>{
          this.permission=res.data.permission
        if(this.permission){
            ElMessage({
              message: '注册成功！',
              type: 'success',
           })
        }
        else{
            ElMessage({
              message: '注册失败,用户名已存在',
              type: 'warning',
           })
        }
        })
        
    },
    //点击cancel，清空所填的值
    cancel(){
        this.form.username=""
        this.form.password=""
        this.form.role=0
        this.form.age=1
        this.form.gender=0
    }
  }
}
</script>